import "./index.scss";
import React, {
  useCallback,
  useMemo,
  useState,
  useRef,
  useEffect,
} from "react";
import { Input, Descriptions, Table, Button } from "antd";
import type { ColumnsType } from "antd/es/table";
import type { TableRowSelection } from "antd/es/table/interface";
import { Link } from "react-router-dom";
interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

const data: DataType[] = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `${i + 1}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

const OutboundOrderQuery = () => {
  const [update, setUpdate] = useState<boolean>(false);
  const jump = useCallback((text: string) => {}, []);
  const columns: ColumnsType<DataType> = useMemo(
    () => [
      {
        title: "ASN",
        dataIndex: "name",
        fixed: "left",
        render: (text) => {
          return (
            <Link to={{ pathname: "/home/ASNDetail" }}>
              <div onClick={() => jump(text)}>{text}</div>
            </Link>
          );
        },
      },
      {
        title: "状态",
        dataIndex: "age",
      },
      {
        title: "入库类型",
        dataIndex: "address",
      },
      {
        title: "货主",
        dataIndex: "address",
      },
      {
        title: "客户单号",
        dataIndex: "address",
      },
      {
        title: "供应商编码",
        dataIndex: "address",
      },
      {
        title: "供应商名称",
        dataIndex: "address",
      },
      {
        title: "货箱已出货",
        dataIndex: "address",
      },
      {
        title: "货箱已收货",
        dataIndex: "address",
      },
      {
        title: "已收数量",
        dataIndex: "address",
      },
      {
        title: "收货时间",
        dataIndex: "address",
      },
      {
        title: "预计到货时间",
        dataIndex: "address",
      },
    ],
    []
  );

  const formData = useRef<Record<string, string>>({});
  const labelList = useMemo(
    () => [
      { id: 1, label: "ASN单号" },
      { id: 2, label: "客户单号" },
      { id: 3, label: "状态始于" },
      { id: 4, label: "状态终于" },
      { id: 5, label: "收货日期" },
      { id: 6, label: "SKU编码" },
      { id: 7, label: "SKU说明" },
      { id: 8, label: "货主" },
      { id: 9, label: "计划收货日期" },
      { id: 10, label: "批号" },
      { id: 11, label: "供货商编码" },
      { id: 12, label: "供应商名称" },
    ],
    []
  );

  const handleChange = useCallback((data: Record<string, string>) => {
    formData.current = { ...formData.current, ...data };
  }, []);

  useEffect(() => {
    formData.current = {};
  }, [update]);

  const listItem = useMemo(
    () =>
      labelList.map((v, index: number) => (
        <Descriptions.Item label={v.label} key={new Date().getTime()}>
          <Input
            placeholder="请输入"
            onChange={(e) => handleChange({ [v.label]: e.target.value })}
          />
        </Descriptions.Item>
      )),
    [update]
  );
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = useCallback((newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
  }, []);

  const rowSelection: TableRowSelection<DataType> = useMemo(
    () => ({
      selectedRowKeys,
      onChange: onSelectChange,
      selections: [
        Table.SELECTION_ALL,
        Table.SELECTION_INVERT,
        Table.SELECTION_NONE,
        {
          key: "odd",
          text: "Select Odd Row",
          onSelect: (changableRowKeys) => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((_, index) => {
              return index % 2 === 0;
            });
            setSelectedRowKeys(newSelectedRowKeys);
          },
        },
        {
          key: "even",
          text: "Select Even Row",
          onSelect: (changableRowKeys) => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((_, index) => {
              return index % 2 !== 0;
            });
            setSelectedRowKeys(newSelectedRowKeys);
          },
        },
      ],
    }),
    [selectedRowKeys]
  );

  return (
    <div className="ASN">
      <div className="form-box">
        <div className="form-contain">
          <Descriptions
            bordered
            column={{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }}
            labelStyle={{ backgroundColor: "#F5F5F5" }}
          >
            {listItem}
          </Descriptions>
          <div className="button-box">
            <button onClick={() => setUpdate(!update)}> 重置</button>
            <button onClick={() => console.log(formData.current)}> 查询</button>
          </div>
        </div>
      </div>
      <div className="table-box form-box">
        <div className="table-contain">
          <div className="table-button-box">
            <button type="button"> 打开ASN</button>
            <button type="button"> 关闭ASN</button>
            <button type="button"> 导出ASN</button>
            <button type="button"> 打印商品条码</button>
            <button type="button"> 打印收货验收单</button>
          </div>
          <Table
            rowSelection={rowSelection}
            columns={columns}
            dataSource={data}
          />
          ;
        </div>
      </div>
    </div>
  );
};
export default OutboundOrderQuery;
